<template>
  <div class="form Wrapper" :style="`background-image: url(${Domain}/static/biaoQian/${bgIndex}.png);`" >
    <div class="bg">

    <div v-for="(item1,index1) in dataList" :key="index1" class="itemWrapper1"  >
      <!--多选-->
      <div class="itemWrapper"  :class="bgBorderType===1?'itemWrapper_1':'itemWrapper_2'">
        <div class="title"> 编号：{{item1.Code}}&nbsp{{item1.Name}}</div>
        <div  v-for="(item2,index2) in item1.childs" :key="index2" >
          <div class="f-bian label " >
            <span @click="do_showDetail(item2)" class=" leftTitle"><span class="jianjia"  :class="[item2.showDetail==true&&item2.oS?'jian':'jia',item2.oS?'':'iconShowNO']" ></span>{{item2.Code}}、{{item2.Name}}</span>
          <input :class="[(item2.isSC==true&&item1.sModel=='单选')?'inputRadio':'',(item2.isSC==true&&item1.sModel=='多选')?'inputCheck':'']"  :checked="item2.isSC" :type="item1.sModel=='单选'?'radio':'checkbox'" :name="item1.SN"   @click.stop="doselect(item2,index1,item1,index2)">
          </div>
          <div v-show="item2.showDetail==true&&item2.oS" class="otherChildWrapper">
            <!--子集选项 v-show="item2.isSC==true" v-show="index1==otherShow[index1]"-->
            <div  class=""  v-for="(List2item,List2index) in item2.oS" :key="List2index" v-if="item2.oS">
                <div v-if="List2item" class="" v-for="(List3item,List3index) in List2item.childs" :key="List3index" >
                   <div class="f-bian otherChild">
                     <span>{{List3item.Code}} &nbsp{{List3item.Name}}</span> <input :class="[(List3item.isSC==true&&item2.oS[0].sModel=='单选')?'inputRadio':'',(List3item.isSC==true&&item2.oS[0].sModel=='多选')?'inputCheck':'']" :type="item2.oS[0].sModel=='单选'?'radio':'checkbox'" :name="item2.SN"  @click.stop="doselect2(item1,index1,item2,index2,List3item,List3index)">
                   </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
 <div class="f-zhong"><button class="btn" @click="do_submit">提交</button> </div>
      <div style="color: white" id="foot">
        <!--背景选择-->
        <ul class="flex ">
          <li class="flex1 f-zhong " v-for="(item,index) in biaoQian" :key="index" @click="chooseBg(index)"><div  :style="bgChoose(index)" :class="bgIndex==index+1?'borderWhite':''"></div></li>
          <li class="flex1 f-zhong"   id="bai" @click="chooseBg(7)"><div ></div></li>
        </ul>
      </div>

  </div>
  </div>
</template>

<script>
  // import BScroll from 'better-scroll'
export default {
  name: 'HelloWorld',
  data() {
    return {
      // contentScroll:{},
      bgBorderType:false,
      bgIndex:'4',
      Domain:this.$ZcPublic.Domain,
      biaoQian:[1,2,3,4,5,6,7],
      dataList2: '',
      otherShow: '',
      SNList:[],
      dataList: [{
        "SN": "8A59D521-D57D-4AF5-9AB7-76143C2E6122",
        "Code": "01",
        "Name": "车型",
        "sModel": "单选",
        "childs": [{
          "id": null,
          "Code": "1",
          "Name": "别克",
          "SN": "E4A05F87-0839-4277-878E-31663F76C0AE",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": [{
            "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
            "Code": "1",
            "Name": "购车时段分类",
            "sModel": "多选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "别克11",
              "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "别克22",
              "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "别克33",
              "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }],
          "childs": null
        }, {
          "id": null,
          "Code": "2",
          "Name": "大众",
          "SN": "D42AA792-E34A-473A-BBE2-1B84BD14F3D7",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": [{
            "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
            "Code": "1",
            "Name": "购车时段分类",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "大众11",
              "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "大众22",
              "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "大众33",
              "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }],
          "childs": null
        }, {
          "id": null,
          "Code": "3",
          "Name": "宝马",
          "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": null,
          "childs": null
        }, {
          "id": null,
          "Code": "4",
          "Name": "奥迪",
          "SN": "94A84E35-41FC-4D72-AE36-195CBAC423B5",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": null,
          "childs": null
        }]
      }, {
        "SN": "15FC9087-4E1B-415C-960E-958634C97F08",
        "Code": "02",
        "Name": "爱好",
        "sModel": "多选",
        "childs": [{
          "id": null,
          "Code": "1",
          "Name": "旅浒",
          "SN": "08221932-2DED-4C2E-9ED7-5C3A74BE5529",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": [{
            "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
            "Code": "1",
            "Name": "购车时段分类",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "旅浒11",
              "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "旅浒22",
              "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "旅浒33",
              "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }],
          "childs": null
        }, {
          "id": null,
          "Code": "2",
          "Name": "游泳",
          "SN": "2D6BAE46-5455-42E2-9DB5-B0B40161E0C4",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": [{
            "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
            "Code": "1",
            "Name": "购车时段分类",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "游泳11",
              "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "游泳22",
              "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "游泳33",
              "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }],
          "childs": null
        }, {
          "id": null,
          "Code": "3",
          "Name": "打球",
          "SN": "BB7B971E-44A3-4E09-9CA2-AB5A234D8058",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": null,
          "childs": null
        }]
      }, {
        "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
        "Code": "03",
        "Name": "购车意向",
        "sModel": "单选",
        "childs": [{
          "id": null,
          "Code": "1",
          "Name": "最近无购车计划",
          "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": null,
          "childs": null
        }, {
          "id": null,
          "Code": "2",
          "Name": "最近有购车计划",
          "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
          "isS": false,
          "IsEnd": false,
          "isSC": false,
          "oS": [{
            "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
            "Code": "1",
            "Name": "购车时段分类",
            "sModel": "单选",
            "childs": [{
              "id": null,
              "Code": "1",
              "Name": "计划1月内购车",
              "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "2",
              "Name": "计划半年内购车",
              "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }, {
              "id": null,
              "Code": "3",
              "Name": "计划1年内购车",
              "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
              "isS": false,
              "IsEnd": false,
              "isSC": false,
              "oS": null,
              "childs": null
            }]
          }],
          "childs": null
        }]
      },
        {
          "SN": "DF440209-11B0-45CA-A020-20E821C7507C",
          "Code": "04",
          "Name": "买房",
          "sModel": "单选",
          "childs": [{
            "id": null,
            "Code": "1",
            "Name": "最近无买房计划",
            "SN": "D8428D79-FFB0-40DE-9031-2DFB008C03A2",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": null,
            "childs": null
          }, {
            "id": null,
            "Code": "2",
            "Name": "最近有买房计划",
            "SN": "A2969198-A51C-4774-A358-CFE061D4C68F",
            "isS": false,
            "IsEnd": false,
            "isSC": false,
            "oS": [{
              "SN": "24B0C050-89A5-4A39-9EB5-657F360F16DA",
              "Code": "1",
              "Name": "买房时段分类",
              "sModel": "单选",
              "childs": [{
                "id": null,
                "Code": "1",
                "Name": "1月内买房",
                "SN": "C7A8DE96-9A56-4DC7-947E-B73EE0F1A794",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "2",
                "Name": "计划半年内买房",
                "SN": "DCEE057A-1EF3-458C-8FE4-D4CE0617EC5D",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }, {
                "id": null,
                "Code": "3",
                "Name": "计划1年内购卖方",
                "SN": "698D2923-2EE6-4234-AD21-8FB38FE0344A",
                "isS": false,
                "IsEnd": false,
                "isSC": false,
                "oS": null,
                "childs": null
              }]
            }],
            "childs": null
          }]
        }],
      indexotherShow: '',
      arrSelect:[]
    }
  },
  mounted() {
   // this.arrSelect=["L-01-1-1", "L-01-1-2", "L-02-3", "L-03-2-2", "L-04-1"];
    this.$nextTick(() => {
      this.dataList.forEach((item, index) => {
        item.childs.forEach((item2, index2) => {
          this.arrSelect= this.$set(item2, "showDetail", false)
        })
      })
      if(localStorage.getItem('data')){
        this.arrSelect=JSON.parse(localStorage.getItem('data'))
        this.SNList=this.arrSelect
      }
      console.log("改后data", this.dataList)
      if(this.arrSelect){
      try {

        this.arrSelect.forEach((item,index)=>{
          let snL=item.split("-")
          this.dataList.forEach((item2,index2)=>{
            if(snL[1]-1==index2){
              item2.childs.forEach((item3,index3)=>{
                if(snL[2]==item3.Code) {
                  item3.showDetail = true;
                  item3.isSC = true;
                  if(snL[3]){
                  if (item3.oS) {
                    item3.oS[0].childs.forEach((item4, index4) => {
                      if (snL[3] == item4.Code) {
                        item4.isSC = true;
                      }
                    })
                  }
                }
                }
              })
            }
          })
        })
        // console.log("改后data22", this.dataList)
      }catch (e) {
        alert(e)
      }
      }
      // console.log(this.contentScroll)
      // this.contentScroll = new BScroll(this.$refs.contentWrap, {
      //   probeType: 3,
      //   click: true,
      //   scrollX: false
      // });
      // console.log(this.contentScroll)
    })
  },
  created(){
    if(sessionStorage.getItem("bgIndex")){
      this.bgIndex=sessionStorage.getItem("bgIndex")
    }
  },
  methods: {
    chooseBg(index){
      switch (index){
        case 7:
          this.$router.push('biaoqian')
          break;
        case 0:
        case 4:
        case 5:
        case 6:
          this.bgIndex=index+1
         this.bgBorderType=true
          break;
        case 1:
        case 2:
        case 3:
          this.bgBorderType=false
          this.bgIndex=index+1
          break;
      }

    },
    bgChoose(index){
      return  "background-image: url("+this.$ZcPublic.Domain+"/static/biaoQian/"+(index+1)+".png);"
    },
    do_showDetail(item) {
      item.showDetail = !item.showDetail
      console.log(item)
    },
    /* 选择第一级函数*/
    doselect(item, index, itemF, index2) {
      this.indexotherShow = index
      //index为第一级数据的第几个，itemf为第一级数据的一大条数据，item为当前这天数据，index2为当前这条数据位于数组的第几个，
      console.log('第一级大数据', itemF)
      this.$nextTick(() => {
        try {
          item.isSC = !item.isSC

          if (itemF.sModel == "单选") {
            console.log('itemF.childs!', itemF.childs)
            itemF.childs.forEach((itemF2, indexF2) => {
              if (itemF2.isSC) {
                if (indexF2 != index2) {
                  itemF2.isSC = false
                }
              } else {
                itemF2.isSC = false
              }
            })
          }
          itemF.childs.forEach((itemF1,indexF1) => {

            if (!itemF1.isSC) {
              // alert(itemF1.oS[0])
              if (itemF1.oS!=null) {
                itemF1.oS[0].childs.forEach((itemF12) => {
                  itemF12.isSC = false
                })
              }
              itemF1.showDetail=false
            }else {
              if(indexF1==index2){
                itemF1.showDetail=true
              }
            }
          })
          let SN=''
          if(item.isSC){
            item.showDetail=true
          }
          itemF.childs.forEach((itemselect,indexselect)=>{
            SN='L-'+itemF.Code+'-'+itemselect.Code
            if(!itemselect.oS){//如果外层无子选项的情况
            if(itemselect.isSC){//外层已经选中，就往SN数组里面添加SN
              this.SNList.push(SN)
            }else {//外层变成没选中，就往SN数组里面查找和当前SN一样的并且删除
              this.SNList.forEach((itemSN,indexSN)=>{
                if(itemSN==SN){
                  this.SNList.splice(indexSN,1)
                }
              })
            }
            }else {//如果外层有子选项的情况,外层没选中
             if(!itemselect.isSC) {//外层没选中，循环删除之前内部的已选择并且从数组里面删除
               console.log(SN)
               console.log(this.SNList)
               console.log("SN88888")
               this.SNList.forEach((itemSN,indexSN)=>{//循环SN数组
                 // console.log(itemSN)
                 // console.log(SN)
                 if(itemSN.indexOf(SN)>=0){
                   this.SNList.splice(indexSN,1,'')//删除后加一个空值防止数组顺序打乱
                 }
               })
             }
            }
          })
          console.log("第二层点击sn变化",this.SNList)
        } catch (e) {
          console.log(e)
        }
        // this.contentScroll = new BScroll(this.$refs.contentWrap, {
        //   probeType: 3,
        //   click: true,
        //   scrollX: false
        // });
      })
    },
    /*选择第二级函数*/
    doselect2(item1,index1, item12,index12, item123, index123) {
      //item1为第一层，item12第二层，item123第三层
      let SN=''
      console.log("最外层", item1)
      console.log('第二层', item12)
      console.log('最里层具体点击了那条数据', item123)
      this.$nextTick(() => {
        item123.isSC = !item123.isSC
        if (item12.oS[0].sModel == "单选") {//单选如果当前是选中，更改其他为没选中
          item12.oS[0].childs.forEach((itemF2, indexF2) => {
            if (itemF2.isSC) {
              if (indexF2 != index123) {
                itemF2.isSC = false
              }
            } else {
              itemF2.isSC = false
            }
          })
        }
        if(item12.isSC){//如果第二层选中
          item12.oS[0].childs.forEach((itemF2, indexF2)=>{
            let SN2='L-'+item1.Code+'-'+item12.Code+'-'+itemF2.Code
            if(itemF2.isSC){//最里层是选中了就往数组里面添加
              let snIsIn=false
              this.SNList.forEach((listItem,listIndex)=>{//判断SN数组里面是否已经添加过本条数据的Sn
                if(listItem==SN2){
                  snIsIn=true
                }
              })
              if(!snIsIn){//如果未添加过就添加进去
                this.SNList.push(SN2)
              }
            }else {
                // 所有未选择都删除
                this.SNList.forEach((itemSN,indexSN)=>{//匹配在SN数组里面有的对应数据
                  if(itemSN==SN2){
                    this.SNList.splice(indexSN,1)
                  }
                })
            }
          })
        }
      })
    },
    do_submit(){

      // this.SNList.forEach((item,index)=>{
      //   if(item==''){
      //     this.SNList.splice(index,1);
      //     index=index-1
      //   }
      // })
      for(let i=0;i<this.SNList.length;i++){
        if(this.SNList[i]==''){
          this.SNList.splice(i,1);
          i=i-1
        }
      }
      console.log('提交SN',this.SNList)
      this.arrSelect=this.SNList
      localStorage.setItem('data',JSON.stringify(this.arrSelect))
      this.$router.go(0)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*自定义*/
  .f,.f-zhong,.f-bian,.f-tb,.flex{
    display: flex;
  }
  .f-zhong,.f-bian,.f-tb,.itemCenter{
    align-items: center;
  }
  .f-bian{
    justify-content: space-between;
  }
  .f-zhong,.f-tb{
    justify-content: center;
  }
  .f-tb{
    flex-direction: column;
  }
  .flexWrap{
    flex-wrap:wrap
  }
  .flex1{
    flex: 1;
  }
  .label {font-size:16px;cursor:pointer;height: 30px;line-height: 30px;margin: 0;padding: 0 }

  @font-face {
    font-family: 'iconfont';  /* project id 1287028 */
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot');
    src: url('//at.alicdn.com/t/font_1287028_smao1t4xug.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.woff') format('woff'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_1287028_smao1t4xug.svg#iconfont') format('svg');
  }
  input[type="checkbox"]{
       /*margin-left: 10px;*/
       position: relative;
       width: 19px;
       height: 19px;
       background-color: transparent;
       -webkit-appearance: none;
       outline: none;
       border: 1px solid white;
    left: -3px !important;
     }
  input[type="radio"]{
    position: relative;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: transparent;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid white;
  }
  input{
    position: relative !important;
    right: 3px!important;
  }
  .inputCheck,.inputRadio{
    border: none !important;
  }
  .inputCheck:before,.inputRadio:before, .jia:before, .jian:before{
    font-family: "iconfont" ;
    content: "\e63c" !important;
    font-size:20px !important;
    font-weight: 400 !important;
    color: white !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: -9px 0px 0px -5px !important;
    z-index: 99 !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
  }
  .inputRadio:before{
    font-family: "iconfont" ;
    content: "\e62b" !important;
    font-size: 22px !important;
    margin: -9px 0px 0px -5px !important;
  }
  .title{
    height: 50px ;
    line-height: 50px;
    border-bottom: 1px solid gainsboro;
   font-weight: 400;
  }
  .Wrapper{
    /*background: url('../assets/4.jpg') center center no-repeat;*/
    background-size:100% 100%;
    overflow: hidden;
  }
  .itemWrapper{
    margin: 0 10px 10px;
    padding: 0 20px 10px;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px 1px;
    border-radius: 12px;
    color: white;
  }
  .itemWrapper_1{
    border: 1px solid rgba(105, 93, 119, 0.46);
    background-color: rgba(255, 255, 255, 0.19);
    box-sizing: border-box;
  }
  .itemWrapper_2{
    border: 1px solid rgba(105, 93, 119, 0.46);
    background-color: rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
  }
  .itemWrapper1{
    box-sizing: border-box;
    margin-top: 30px;
  }
  .otherChildWrapper{
    margin-top: 10px;
    padding:0 0 0px 20px;
    font-size: 14px;
    line-height: 30px;
     background-color: rgba(0,0,0,.5);
    position: relative;
    border-radius: 3px;
    color: white;
  }
  .otherChildWrapper:before{
    content: '';
    position: absolute;
    border-style:solid;
    border-width:12px 12px 12px;
    border-color: transparent  transparent rgba(0,0,0,.5) transparent ;/*灰 透明 透明 */
    top: -24px;
    left: 30px;
  }
  .jianjia{
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 1px;
  }
  .jia:before{
    font-family: "iconfont" ;
    content: "\e601" !important;
    font-size: 16px !important;
    color: white !important;
    margin-top: -9px !important;
    margin-right: 5px !important;
  }
  .jian:before{
    font-family: "iconfont" ;
    content: "\e68f" !important;
    font-size: 16px !important;
    color: white !important;
    margin-top: -9px !important;
    margin-right: 5px !important;
  }

  .leftTitle{
    min-width: 90%;
    height: 30px;
    color: white;
  }
  .iconShowNO{
    color: red;
  }
  .iconShowNO:before{
    font-family: "iconfont" ;
    color: white !important;
    opacity: 0;
  }
  .btn{
    width: 80px;
    height: 40px;
    border-radius: 5px;
    background-color:rgba(0,0,0,.3) ;
    color: white;
    margin: 20px 0;
    border: 1px solid #5ECFB7;
  }
ul li{
  width: 50px ;
  height: 60px;
  align-items: center;
}
  ul li div{
    width:35px ;
    height: 50px;
    border: 1px solid black;
    /*background-image: url("../../static/biaoQian/1.jpg");*/
    background-size: 100%;
  }
  #bai>div {
    background-image: none;
    background-color: white;
  }
  .borderWhite{
    border:1px solid red;
  }
  #foot{
    position: fixed;
    /*bottom: 0;*/
    width: 100%;
    /*border: 1px solid  red;*/
    height: 60px;
    bottom: 0;
    background-color: white;
    z-index: 999;
  }
  .bg{
    padding-bottom: 70px;
  }
</style>
